<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>echart百度图表</title>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style type="text/css">
			.main{
				width:600px;
				height:500px;
			}
		</style>
	</head>
	<body>
		<div class="main"></div>
		<script type="text/javascript">
			//页面加载完成
			window.onload=function(){
				console.log('over...');
				//使用ajax请求数据
				$.ajax({
					url:'https://cache.iminutes.cn/api/soft/score.html',
					type:'POST',
					data:{
						
					},
					dataType:'json',
					success:function(res){
						console.log(res);
						//判断
						if(res.status==200){
							backScore(res);
						}else{
							alert('数据请求失败!');
						}
					}
				});
			}
			//https://cache.iminutes.cn/api/soft/score.html
			//https://cache.iminutes.cn/api/soft/nscore.html
			/**
			 * 返回成绩
			 * @param {Object} res
			 */
			function backScore(res){
				console.log(res.data);
				//对数据进行处理
				var users = [];
				var scores = [];
				//如何遍历呢？
				$.each(res.data,function(index,ele){
					console.log(index);
					console.log(ele);
					users.push(ele.name);
					scores.push(ele.value);
				});
				console.log(users);
				console.log(scores);
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.querySelector('.main'));
				// 指定图表的配置项和数据
				var option = {
					  xAxis: {
						type: 'category',
						// data: ['李宝莉', '张端阳', '张猛', '缑王哲']
						data:users
					  },
					  yAxis: {
						type: 'value'
					  },
					  series: [
						{
						  // data: [120, 200, 150, 80],
						  data:scores,
						  type: 'bar'
						}
					  ]
					};	
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option)
			}
		</script>
	</body>
</html>
